<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html >
<head>
    <meta charset="UTF-8">
    <title th:text="#{topic} + ' - ' + ${message.title}"></title>
    <meta http-equiv="keywords" th:content="'HappyOJ, Online Judge, 编程, 在线判题系统, 在线IDE, ' +  ${message.tag}">
    <meta http-equiv="description" th:content="'HappyOJ ' + #{topic} + ' - ' + ${message.title}">
    <meta name="twitter:card" content="summary">
    <link rel="stylesheet" th:href="@{/css/styles.css}" >
    <link rel="stylesheet" th:href="@{/js/editormd/css/editormd.css}" />
    <link rel="stylesheet" th:href="@{/js/editormd/css/editormd.preview.css}" />
    <script th:src="@{/js/jquery-1.7.2.js}"></script>
    <script th:src="@{/js/gdoj.js}"></script>
    <script type='text/javascript' th:src="@{/js/editormd/lib/marked.min.js}"></script>
    <script type='text/javascript' th:src="@{/js/editormd/lib/prettify.min.js}"></script>
    <script type='text/javascript' th:src="@{/js/editormd/editormd.min.js}"></script>
    <script type='text/javascript' th:src='@{/js/editor-md.js}'></script>
    <script type='text/javascript' th:src='@{/js/topic.js}'></script>
</head>
<body>
<div th:replace="common::web-navbar"></div>
<div class="container">
    <div class="content">
        <div class="content-with-sidebar"> 	 <!-- class="content-with-sidebar" -->
            <div id="nav-content" >
                <a th:href="@{/topics}" class="current">[[#{topic}]]</a>
                <a th:href="@{/topic/new}">[[#{topic.new}]]</a>
            </div>
            <div class="topic">
                <div class="title">
                    <h3 th:text="${message.title}"></h3>
                </div>
                <div class="topic_manage">
                     <span class="link_author" style="color:grey;">
                         <a th:href="@{/profile/{username}(username=${message.create_user})}"
                            th:class="'rated-user user-rate-' + ${message.user.rate}  + ' user-tip'"
                            th:user="${message.create_user}" th:text="${message.create_user}"></a>
                            &nbsp;[[#{post}]]
                         <span th:title="${#dates.format(message.in_date,'yyyy-MM-dd HH:mm:ss')}" th:text="${message.friendly_Date}"></span>
                    </span>
                    <span class="div-icon-svg" th:title="#{topic.views}">
                        <svg viewBox="0 0 24 24" aria-hidden="true" class="icon-svg"><g><path d="M8.75 21V3h2v18h-2zM18 21V8.5h2V21h-2zM4 21l.004-10h2L6 21H4zm9.248 0v-7h2v7h-2z"></path></g></svg>
                        <span th:text="${message.views}"></span>
                    </span>
                    <span class="div-icon-svg" th:title="#{topic.reply}">
                        <svg viewBox="0 0 24 24" aria-hidden="true" class="icon-svg"><g><path d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z"></path></g></svg>
                        <a th:href="@{/topic/{messageId}#comments(messageId=${message.message_id})}" th:text="${message.comments}"></a>
                   </span>
                   <a th:if="${message.create_user == session.session_username}" th:href="@{/topic/edit/{messageId}(messageId=${message.message_id})}" >
                        <span class="div-icon-svg" th:title="#{topic.edit}">
                            <svg viewBox="0 0 1024 1024" class="icon-svg" p-id="4186"><path d="M341.108888 691.191148 515.979638 616.741529 408.633794 511.126097 341.108888 691.191148Z" p-id="4187"></path><path d="M860.525811 279.121092 749.7171 164.848489 428.544263 481.69274 543.68156 601.158622 860.525811 279.121092Z" p-id="4188"></path><path d="M951.813934 142.435013c0 0-29.331026-32.462343-63.091944-57.132208-33.759895-24.670889-59.729359 0-59.729359 0l-57.132208 57.132208 115.996874 115.565039c0 0 48.909943-49.342802 63.957661-66.222237C966.861652 174.897356 951.813934 142.435013 951.813934 142.435013L951.813934 142.435013z" p-id="4189"></path><path d="M802.174845 946.239985 176.165232 946.239985c-61.635779 0-111.786992-50.151213-111.786992-111.786992L64.37824 208.443379c0-61.635779 50.151213-111.786992 111.786992-111.786992l303.856449 0c12.357446 0 22.357194 10.011005 22.357194 22.357194s-9.999748 22.357194-22.357194 22.357194L176.165232 141.370775c-36.986379 0-67.072605 30.086226-67.072605 67.072605l0 626.009613c0 36.986379 30.086226 67.072605 67.072605 67.072605l626.009613 0c36.985356 0 67.072605-30.086226 67.072605-67.072605L869.24745 530.596544c0-12.347213 9.999748-22.357194 22.357194-22.357194s22.357194 10.011005 22.357194 22.357194l0 303.856449C913.961838 896.088772 863.810624 946.239985 802.174845 946.239985z" p-id="4190"></path></svg>
                            <span th:text="#{topic.edit}"></span>
                        </span>
                   </a>
                </div>
                <div class="tags">
                    <span th:each="tag : ${message.tags}">
                         <a th:href="'/topics?tag=' + ${tag.name}" rel="tag" th:text="${tag.name}"></a>
                    </span>
                </div>
                <div class="content markdown-view" id="topic-content-markdown-view" th:if="${message.mode==1}">
                    <textarea style="display:none;" th:utext="${message.content}"></textarea>
                </div>
                <div class="content" th:if="${message.mode!=1}">
                    <blockquote>
                        <p th:utext="${message.content}"> ></p>
                    </blockquote>
                </div>
                <div style="text-align:center;;width: 100%">
                    <a class="share-twitter" th:topicId="${message.message_id}" target="_blank">
                        <span class="div-icon-svg-share" th:title="Twitter">
                            <svg aria-hidden="true" viewBox="0 0 24 28" class="icon-svg"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"></path></svg>
                            <span th:text="Twitter"></span>
                        </span>
                    </a>
                </div>
            </div>
<script type="text/javascript">
    $(document).ready(function () {
        $(".share-twitter").on("click", function () {
            var id = $(this).attr("topicId");
            var shareTxt = "";
            var childTxtElements = $(this).parent().find(".content")
            childTxtElements.each(function() {
                shareTxt = $(this).text().trim().substr(0, 250);
            });
            var shareTitle = "";
            var childTitleElements = $(this).parent().find(".title");
            childTitleElements.each(function() {
                shareTitle = $(this).text().trim();
            });

            var url = "https://happyoj.com/topic/" + id;
            window.open("http://twitter.com/share?url=" + encodeURIComponent(url) + "&text=" + encodeURIComponent(shareTitle + '\n' + shareTxt) + "&display=popup&ref=plugin&src=share_button", "twitter", "height=500, width=750, top=" + ($(window).height() / 2 - 250) + ", left=" + (document.body.offsetWidth / 2 - 375) + ", toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no");
        });
    })
</script>
            <div th:if="${session.session_username != null}" class="roundbox comment reply-edit-box reply-edit-box-pro">
                <div class="comments rtable">
                    <span style="float:left; width:40px;">
                        <a th:href="@{/profile/{username}(username=${session.session_username})}"
                           th:class="user-tip" th:user="${session.session_username}" >
                        <img class="normal-avatar" th:src="${session.session_user_avatar_url}"/></a>
                    </span>
                    <div style="margin-left:86px;">
                        <form action="" method="post">
                            <input type="hidden" name="type" value="new" >
                            <input type="hidden" name="moduleId" value="0">
                            <input type="hidden" name="parentId" th:value="${message.message_id}">
                            <input type="hidden" name="rootId" th:value="${message.root_id}">
                            <div class="editor-md" id="editor-topic-comment" style="text-align:left;margin-bottom: 6px;">
                                <textarea class="message-content ke-editor" id="reply-content" name="content" rows="10"></textarea>
                            </div>
                            <div style="text-align: left;">
                                <input class="button_submit" type="submit" th:value="#{topic.btn_reply}">
                                <span class="fielderror"></span>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <br>
            <div class="roundbox" th:if="${comments.size > 0}" id="comments">
                <div class="title" style="margin-left: 12px;">
                    <h4 th:text="#{topic.comments} + ' ( ' + ${comments.size} + ' )'"></h4>
                </div>
                <div class="comments rtable">
                    <ul id="ul-comments" th:each="comment,stat : ${comments}" >
                        <div th:if="${stat.index > 0}" class="comment-line"></div>
                        <li th:style="'margin-left: ' + ${comment.commentDepth * 30} + 'px'">
                            <div th:id="'mc_' + ${comment.message_id}" class="comment">
                                <span style="float:left; width:40px;">
                                    <a th:href="@{/profile/{username}(username=${comment.create_user})}"
                                       th:class="'rated-user user-rate-' + ${comment.user.rate}  + ' user-tip'"
                                       th:user="${comment.create_user}" >
                                    <img class="small-avatar" th:src="${comment.user.avatar}"/></a>
                                </span>
                                <div style="margin-left:50px;">
                                    <a th:href="@{/profile/{username}(username=${comment.create_user})}"
                                       th:class="'rated-user user-rate-' + ${comment.user.rate}  + ' user-tip'"
                                       th:user="${comment.create_user}" th:text="${comment.create_user}"
                                       th:name="'rpl_' + ${comment.message_id}">
                                    </a>
                                    <span style="color:grey" th:title="${#dates.format(comment.in_date,'yyyy-MM-dd HH:mm:ss')}" th:text="'&nbsp;' + #{post} + ${comment.friendly_Date}"></span>
                                    <a th:if="${comment.create_user != session.session_username  && session.session_username != null}" th:href="'javascript:ReplyInline('+${comment.message_id}+',' +${comment.root_id}+ ')'">[[#{reply_comment}]]</a>
                                    <a th:if="${comment.create_user == session.session_username && comment.comments == 0}" th:href="'javascript:DeleteComment('+${comment.message_id}+')'">[[#{delete_comment}]]</a>
                                    <span th:commentid="${comment.message_id}" style="float:right;">
                                        <a href="" class="vote-for-comment" voteDirection="1" dd="x">
                                            <img style="position:relative;top:3px;opacity:0.55;"
                                                 th:src="@{/img/vote/comment-voteup.png}" alt="Vote: I like it" title="Vote: I like it" />
                                        </a>
                                        &nbsp;
                                        <span style="color:green;font-weight:bold;" th:if="${comment.votes>0}" th:text="'+' + ${comment.votes}"></span>
                                        <span style="color:gray;font-weight:bold;" th:if="${comment.votes<=0}" th:text="${comment.votes}"></span>
                                        &nbsp;
                                        <a href="" class="vote-for-comment" voteDirection="-1" dd="y">
                                            <img style="position:relative;top:2px;opacity:0.55;"
                                                 th:src="@{/img/vote/comment-votedown.png}" alt="Vote: I do not like it" title="Vote: I do not like it" />
                                        </a>
                                    </span>
                                    <div class="comment-content markdown-view" th:id="'markdown-view_comment_of_' + ${comment.message_id} + '_' + ${comment.root_id}" >
                                        <textarea style="display:none; border: none" th:utext="${comment.content}" th:if="${comment.mode==1}"></textarea>
                                        <p th:utext="${comment.content}" th:if="${comment.mode!=1}"></p>
                                    </div>
                                    <div th:id="'inline_reply_of_' + ${comment.message_id} + '_' + ${comment.root_id}" class='inline_reply'></div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="sidebar" th:replace="sidebar::web-sidebar"></div>
    </div>
    <div th:replace="common::web-footer"></div>
</div>

<!-- 内嵌评论编辑框 -->
<div id='inline_reply_editor' style='display: none;'>
    <div class="comment inline-reply-edit-box" style="position: relative;padding: 6px;">
        <form action="" method="post">
            <input type="hidden" name="type" value="new" >
            <input id="inline_moduleId" type="hidden" name="moduleId" value="0">
            <input id="inline_parentId" type="hidden" name="parentId" value="0">
            <input id="inline_rootId" type="hidden" name="rootId" value="0">
            <div class="topic-inline-reply-comment" id="editor-topic-inline-reply-comment" style="text-align:left;">
                <textarea class="message-content" id="inline-reply-content" name="content" rows="10"
                  onkeydown="if(event.ctrlKey&&event.keyCode==13){$('#form_inline_comment').submit();}"></textarea>
            </div>
            <div style="text-align: left;">
                <input class="button_submit" type="submit" th:value="#{topic.btn_reply}" id="btn_comment">
                <input class="button_submit" type="button" th:value="#{topic.btn_cancel}" id='btn_close_inline_reply'>
                <span class="inline-fielderror"></span>
            </div>
        </form>
    </div>
</div>
</body>
</html>
